<template>
    <div class="head-box">
          <el-row class="head-row">
            <el-col :span="5" class="head-title" > 
                <el-icon :size="20" @click="changeiscol">
                    <CaretLeft v-if="!isCollapse"/>
                    <CaretRight v-else/>   
                </el-icon>
                <h2 class="title">图书馆管理系统</h2>
            </el-col>
            <el-col :span="12" class="mtext">
                <marquee behavior="" direction="">
                    欢迎访问图书馆管理系统
                </marquee>
            </el-col>
            <el-col class="head-user" :span="7" v-if="userInfo">
                <el-tag  effect="dark" class="myrole" :color="roleList.find(item=>item.value==userInfo.role).color"  > {{ roleList.find(item=>item.value==userInfo.role).text }} </el-tag>
                
                <el-tooltip class="avatar" content="更换头像" placement="bottom">
                    
                    <Avatar></Avatar>  
                </el-tooltip>
                <el-dropdown @command="handleCommand" >
                    <span class="head-info"> 
                        {{userInfo.username }} 
                        <el-icon :size="15" style="margin-left:4px;">
                            <ArrowDown></ArrowDown>
                        </el-icon>
                        
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="home" >首页</el-dropdown-item>
                            <el-dropdown-item command="info">个人中心</el-dropdown-item>
                            <el-dropdown-item command="changepass">修改密码</el-dropdown-item>
                            <el-dropdown-item command="message">我的消息</el-dropdown-item>
                        </el-dropdown-menu>
                        </template>
                </el-dropdown>
                
                <el-tooltip content="注销登录" placement="bottom">
                    <el-button type="danger" @click="logoutAction"  :icon="SwitchButton" circle></el-button>
                </el-tooltip>
                
            </el-col>
        </el-row>

          <el-dialog v-model="show" :title="'修改密码'">
            <el-form 
                :model="form"
                :rules="rules"
                ref="nform"
                >
                <el-form-item label="旧密码" prop="oldpass" >
                    <el-input v-model="form.oldpass"  show-password
                    :prefix-icon="Lock"   type="password" autocomplete="off" placeholder="请输入旧密码"></el-input>
                </el-form-item>
                <el-form-item label="新密码" prop="newpass" >
                   <el-input v-model="form.newpass"  show-password
                    :prefix-icon="Lock"   type="password" autocomplete="off" placeholder="请输入新密码"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
            <span class="dialog-footer">
                <el-button @click="show = false">取消</el-button>
                <el-button type="primary" @click="confirmchange"
                >确认修改</el-button
                >
            </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import {ArrowLeftBold,CaretLeft,CaretRight,SwitchButton,ArrowDown,Calendar, Search ,User , Lock } from "@element-plus/icons"
import {reactive,toRefs,computed,ref} from "vue"
import {useStore} from "vuex"
import {useRouter} from "vue-router"
import { ElMessageBox, ElMessage } from 'element-plus'
import {roleList , toast} from "@/utils"
import Avatar from "./Avatar.vue"
import {reg} from "@/utils/validate"
import {ajax} from "@/api"
export default {
    components:{
        ArrowLeftBold,
        CaretLeft,
        CaretRight,
        ArrowDown,
        Avatar
    },
    setup(){
        const nform = ref()
        const store = useStore()
        const router = useRouter()
        const userInfo = computed(()=>{
            return store.state.userInfo 
        })
          const isCollapse = computed(()=>{
            return store.state.isCollapse
        })
       
        const state = reactive({
            
            SwitchButton,
            roleList,
            show:false,
            form:{},
            Lock,
            rules:{
                oldpass:[
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur',
                    },
                    {
                        pattern:reg.pwd,
                        trigger:'blur',
                        message:"请输入6-16的数字字母密码组合"
                    }
                ],
                newpass:[
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur',
                    },
                    {
                        pattern:reg.pwd,
                        trigger:'blur',
                        message:"请输入6-16的数字字母密码组合"
                    }
                ]
            }
        })
        const logoutAction = ()=>{
            ElMessageBox.confirm(
                '你真的要退出登录吗?',
                '退出警告',
                {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                }
            )
            .then(() => {
                sessionStorage.removeItem("token")
                store.commit("changeUserInfomu",null);
                router.push({name:"login"})
            })
            .catch(() => {
                
            })
           
        }

        const handleCommand = (command)=>{
            console.log(command)
            if(command=='changepass'){
                state.show = true; 
            }else{
                router.push({name:command})
            }
        }
        const confirmchange = ()=>{
            nform.value.validate(async valid=>{
                if(valid){
                    // ajax 
                    let {code,result} = await ajax.changepass(state.form)
                    if(code==200){
                        state.show = false;
                        sessionStorage.removeItem("token")
                        store.commit("changeUserInfomu",null);
                        router.push({name:"login"})
                    }
                    
                }else{
                    toast.error("请输入正确的密码")
                }
            })
        }

 const changeiscol = ()=>{
            store.commit('changeisCollapse',!store.state.isCollapse)
        }
        return {
            ...toRefs(state),
            userInfo,
            logoutAction,
            handleCommand,
            confirmchange,
            nform,
            isCollapse,
            changeiscol
        }
    }
}
</script>


<style lang="scss" scoped>
.head-box{
  height:100%;
  .head-row{
    height:100%;
    display: flex;
    align-items: center;
    .head-title{
      display: flex;
      align-items: center;
      cursor: pointer;
      color:#000;
      .head-icon{
        font-size: 20px;
        font-weight: bold;
      }
      .title{
          font-size: 18px;
          color:#000;
      }
    }
    .mtext{
        padding:0 20px;
        color:rgb(18, 25, 37);
    }
    .head-user{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding:0 10px;
      .myrole{
        color:#fff;
        margin-right: 20px;
        cursor: pointer;
      }
      .avatar{
        cursor: pointer;
        position: relative;
        
      }
      .head-info{
        font-size:18px;
        color:#123456;
        cursor: pointer;
        padding:0 20px;
        text-align: center;
        display: flex;
        align-items: center;
      }
    }
  }
  
}
</style>